<!DOCTYPE html>
<html>
<head>
<!-- <script src="/home/thegodfather/Downloads/Softwares/jquery-3.3.1.min.js"></script> -->
<script src="./test.js"></script>
<!-- <script src="../node_modules/web3/dist/web3.js" type="text/javascript"></script> -->
<meta name="viewport" content="width=device-width, initial-scale=1">

	<title>Supply Chain Dapp</title>

	<style type="text/css">
		*{
margin:0px;
padding:0px;
/*background-color: lightgrey;*/
}

#main{
	position: relative;
	/*display: inline-block;	*/
}

#content1{
	position: absolute;
	margin-left: 4em;
}

#content2{
	position: absolute;
	margin-left: 40em;
}

#content4{
	position: absolute;
	margin-left: 4em;
	margin-top: 24em;
}

#content3{
	display: none;
	position: absolute;
	margin-left: 57em;
	/*margin-top: 30em;*/
}

#content5{
	position: absolute;
	margin-left: 40em;
	margin-top: 24em;
}


.textb{
	/*background-color: #F2F5F1;*/
		border: none;
		border-bottom: 2px solid black;
}
.textb:active,hover{
	/*background-color: #F2F5F1;*/
		border: none;
		border-bottom: 4px solid black;
}
.textholder{
margin-top:0.75em;
margin-left: 0.75em;
/*background-color: brown;	*/
}

.labelholder{
	margin-left: 1em;
	font-size: 1em;
}

.texth{
	font-size: 3em;
}

.title{
	margin: 1em 0 -2em 1em;
}

.formt{
	font-size: 1.25em;
}
</style>


</head>
<body>
<div id="main">

	<div id="content1">
		<div class="title"><h2 style="margin:0 1em 1em 0" class="texth">Add Product</h2><br></div>
		<label class="labelholder "><b><span class="formt">OwnerId:</span></b></label>
		<div class="textholder">
		<input type="text" id="OwnerId" class="textb"></div>
		<br><label class="labelholder"><b><span class="formt">ProductID:</span></b></label>
		<div class="textholder"><input type="text" id="productId" class="textb"><br></div>
		<br><label class="labelholder"><b><span class="formt">Description:</span></b></label>
		<div class="textholder"><input type="text" id="Description" class="textb"><br></div>
		<!-- <input type="button" value = "submit" id="submit" onclick="App.addProduct()" /> -->
		<button style="margin:1em 0em 0em 2em;font-size:1.3em" type="button" onclick="addProduct()">Add Product</button>

		<div id="status" style="margin-top:1em; color:blue;"></div>
		<!-- <div><br><label class="labelholder"><span class="formt">Status:</span></label>
		<span id="output1" style="margin:10em 0em 0em 1em;width:10em;height:3em;background-color:lightgrey;font-size: 1.5em">Placeholder</span>
		<hr style="height:2px;width:90em;margin-top:4em;color:#333;background-color:#333;"/>
		</div> -->
	</div>
	<div id="content2">
		<div class="title"><h2 style="margin:0 1em 1em 0" class="texth">Register User</h2><br></div>
		<label class="labelholder"><b><span class="formt">TraderID:</span></b></label>
		<div class="textholder">
		<input type="text" id="TraderId" class="textb"></div>
		<br><label class="labelholder"><b><span class="formt">Password:</span></b></label>
		<div class="textholder"><input type="text" id="password" class="textb"><br></div>
		<br><label class="labelholder"><b><span class="formt">Name:</span></b></label>
		<div class="textholder"><input type="text" id="Name" class="textb"><br></div>
		<!-- <input type="button" value = "submit" id="submit" onclick="App.addProduct()" /> -->
		<button style="margin:1em 0em 0em 2em;font-size:1.3em" type="button" onclick="addTrader()">Register</button>

		<div id="status1" style="margin-top:1em; margin-left:1em;color:blue;"></div>
		<!-- <div><br><label class="labelholder"><span class="formt">Status:</span></label>
		<span id="output2" style="margin:10em 0em 0em 1em;width:10em;height:3em;background-color:lightgrey;font-size: 1.5em">Placeholder</span>
		</div> -->
	</div>

	<div id="content4">
		<div class="title"><h2 style="margin:0 0em 1em -0.5em"class="texth">Transfer Ownership</h2><br></div>
		<label class="labelholder "><b><span class="formt">Sender address:</span></b></label>
		<div class="textholder">
		<input type="text" id="sender_address" class="textb"></div><br>
		<label class="labelholder "><b><span class="formt">Password	:</span></b></label>
		<div class="textholder">
		<input type="text" id="trans_password" class="textb"></div>
		<br><label class="labelholder"><b><span class="formt">ProductID:</span></b></label>
				<div class="textholder"><input type="text" id="trans_productId" class="textb"><br></div>
				<br><label class="labelholder"><b><span class="formt">Receiver Address:</span></b></label>
						<div class="textholder"><input type="text" id="receiver_address" class="textb"><br></div>
		<!-- <input type="button" value = "submit" id="submit" onclick="App.addProduct()" /> -->
		<button style="margin:1em 0em 0em 2em;font-size:1.3em" type="button" onclick="transfer()">Transfer</button>
		<!-- <div><br><label class="labelholder"><span class="formt">Status:</span></label>
		<span id="output4" style="margin:10em 0em 0em 1em;width:10em;height:3em;background-color:lightgrey;font-size: 1.5em">Placeholder</span>
		</div> -->
		<div id="status2" style="margin-top:1em; margin-left:1em;color:blue;"></div>
	</div>
	<div id="content5">
		<div class="title"><h2 style="margin:0 1em 1em 0" class="texth">Get Ownership History</h2><br></div>
		<label class="labelholder"><b><span class="formt">ProductID:</span></b></label>
		<div class="textholder">
		<input type="text" id="own_productId" class="textb"></div>
		<br>
		<!-- <input type="button" value = "submit" id="submit" onclick="App.addProduct()" /> -->
		<button style="margin:1em 0em 0em 2em;font-size:1.3em" type="button" onclick="backtracking()">Get</button>
		<div id="status" style="margin-top:0.5em; color:blue;"></div>

		<div><br><label class="labelholder"><span class="formt">Status:</span></label>
		<span id="output5" style="width:10em;height:3em;font-size: 1.5em"></span>
		</div>
	</div>
</div>
</body>
</html>
